<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :title="title"
    width="800px"
    top="5vh"
  >
    <MainContainer class="p-2 h-[52vh]" data-test="recipient-list">
      <MyTable
        v-loading="loading"
        max-height="50vh"
        class="my-2"
        :data="list"
        :columns="columns"
        :is-show-selection="true"
        @confirm="handleConfirm"
      ></MyTable>
    </MainContainer>
    <template #footer>
      <div class="flex">
        <el-button size="large" class="flex-1" @click="handleClose">
          取消
        </el-button>
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          class="flex-1"
          @click="handleBindingAbnormalUserId"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import MainContainer from "@/components/MainContainer.vue";
import MyTable from "@/components/MyTable.vue";
import { toRefs } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

let abnormalUserIds;

const { visible } = toRefs(props);

const emit = defineEmits(["update:visible", "confirm"]);

function handleClose() {
  emit("update:visible", false);
}

function handleConfirm(val) {
  if (val.length === 1) {
    abnormalUserIds = String(val[0].id);
  } else {
    abnormalUserIds = "";
    val.forEach((element) => {
      abnormalUserIds += String(element.id) + ",";
    });
    abnormalUserIds = abnormalUserIds.slice(0, abnormalUserIds.length - 1);
  }
}

const loading = ref(false);

async function handleBindingAbnormalUserId() {
  emit("confirm", abnormalUserIds);
  emit("update:visible", false);
}

const columns = [
  {
    prop: "name",
    label: "联系人",
  },
  {
    prop: "type",
    label: "接收渠道",
    formatter(row) {
      let { type } = row;
      switch (type) {
        case "1":
          return "微信";
        case "2":
          return "短信";
        case "3":
          return "钉钉";
        default:
          break;
      }
    },
  },
];
</script>
